<div ng-if="!$ctrl.field.isSelect" class="form-group row">
    <div ng-switch="$ctrl.field.dataType" class="col-12">
        <div class="text-muted" ng-switch-when="0">
            <!--custom-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.model.data[$ctrl.field.name]" placeholder="{{$ctrl.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="1">
            <!--datetime-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}"
                type="datetime-local"
                ng-model="$ctrl.model.data[$ctrl.field.name]" placeholder="{{$ctrl.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="2">
            <!--date-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}"
                type="date"
                ng-model="$ctrl.model.data[$ctrl.field.name]" placeholder="{{$ctrl.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="3">
            <!--time-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}"
                type="time"
                ng-model="$ctrl.model.data[$ctrl.field.name]" placeholder="{{$ctrl.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="4">
            <!--duration-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.model.data[$ctrl.field.name]" placeholder="{{$ctrl.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="5">
            <!--phonenumber-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="tel"
                ng-model="$ctrl.model.data[$ctrl.field.name]" placeholder="{{$ctrl.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="6">
            <!--Currency-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}"
                type="number"
                ng-model="$ctrl.model.data[$ctrl.field.name]" placeholder="{{$ctrl.field.title}}">
            <label class="control-label" ng-bind="$ctrl.model.data[$ctrl.field.name] | currency:'': 6"></label>
        </div>
        <div class="text-muted" ng-switch-when="7">
            <!--Text-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.model.data[$ctrl.field.name]" placeholder="{{$ctrl.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="8">
            <!--Html-->
            <trumbowyg class="trumbowyg-dark" options="{}" ng-model="$ctrl.model.data[$ctrl.field.name]"></trumbowyg>
        </div>
        <div class="text-muted" ng-switch-when="9">
            <!--TextArea-->
            <textarea class="form-control form-control-sm {{$ctrl.inputClass}}" rows="5"
                ng-model="$ctrl.model.data[$ctrl.field.name]"
                placeholder="{{$ctrl.field.title}}"></textarea>
        </div>
        <div class="text-muted" ng-switch-when="10">
            <!--Email-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="email"
                ng-model="$ctrl.model.data[$ctrl.field.name]" placeholder="{{$ctrl.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="11">
            <!--Password-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="password"
                ng-model="$ctrl.model.data[$ctrl.field.name]" placeholder="{{$ctrl.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="12">
            <!--Url-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.model.data[$ctrl.field.name]" placeholder="{{$ctrl.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="13">
            <!--ImageUrl-->
            <input placeholder="{{$ctrl.field.title}}"
                class="form-control form-control-sm {{$ctrl.inputClass}}" type="url"
                ng-model="$ctrl.model.data[$ctrl.field.name]" placeholder="{{$ctrl.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="14">
            <!--CreditCard-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.model.data[$ctrl.field.name]" placeholder="{{$ctrl.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="15">
            <!--PostalCode-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.model.data[$ctrl.field.name]" placeholder="{{$ctrl.field.title}}">
        </div>
        <div class="text-muted col-8 card p-0" ng-switch-when="16">
            <!--upload-->
            <custom-image header="'Image'" type="'Posts'" folder="'Attributes'"
                src-url="$ctrl.model.data[$ctrl.field.name]" src="$ctrl.model.data[$ctrl.field.name]" auto="'true'">
            </custom-image>
        </div>
        <div class="text-muted" ng-switch-when="17">
            <!--Color-->
            <input class="form-control form-control-sm col-6 {{$ctrl.inputClass}}" type="color"
                value="{{$ctrl.model.data[$ctrl.field.name]}}" ng-model="$ctrl.model.data[$ctrl.field.name]"
                placeholder="{{$ctrl.field.title}}">
            <input class="form-control form-control-sm  col-6 {{$ctrl.inputClass}}" type="text"
                ng-model="$ctrl.model.data[$ctrl.field.name]" placeholder="{{$ctrl.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="18">
            <!--Boolean-->
            <input class="{{$ctrl.inputClass}}" type="checkbox" placeholder="{{$ctrl.field.title}}"                
                ng-model="$ctrl.model.data[$ctrl.field.name]" ng-checked="$ctrl.model.data[$ctrl.field.name]">
        </div>
        <div class="text-muted" ng-switch-when="19">
            <mix-select-icons prefix="'fab'" options="$ctrl.icons" data="$ctrl.model.data[$ctrl.field.name]">
            </mix-select-icons>
        </div>
        <div class="text-muted" ng-switch-when="20">
            <youtube-editor code="$ctrl.model.data[$ctrl.field.name]"></youtube-editor>
        </div>
        <div class="text-muted" ng-switch-when="21">
            <tui-editor content="$ctrl.model.data[$ctrl.field.name]"></tui-editor>
        </div>
        <div class="text-muted" ng-switch-when="22">
            <!-- Number -->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="number"
                ng-model="$ctrl.model.data[$ctrl.field.name]" placeholder="{{$ctrl.field.title}}">
        </div>
        <div class="text-muted" ng-switch-when="23">
            
        </div>
        <div class="text-muted" ng-switch-when="24">
            <!--Text-->
            <qr-code model="$ctrl.model.data[$ctrl.field.name]"></qr-code>            
        </div>
    </div>
</div>
<!-- TODO: Only allow stringValue -->
<div ng-if="$ctrl.field.isSelect" class="form-group row">
    <div class="col-3">
        <h6 class="control-label" ng-if="$ctrl.isShowTitle" ng-bind="$ctrl.field.title"></h6>
    </div>
    <div class="col-9">
        <select ng-if="$ctrl.field.dataType!=19" class="btn custom-select form-control"
            ng-model="$ctrl.model.data[$ctrl.field.name]">
            <option ng-repeat="item in $ctrl.field.options track by $index" ng-value="item.value">
                {{item.value}}
            </option>
        </select>
    </div>
</div>